import React from 'react';
import {Table, Button, Form, Popconfirm, Input, Select} from 'antd';
import UserModify from './userUpdate';
import UserModelCreate from './userCreate';
// import Search from '../search/search';

const FormItem = Form.Item;
const Option = Select.Option;

class Search02 extends React.Component {

  handleSearch = () => {
    const { onSearch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onSearch(values);
      }
    });
  };

  handleReset = () => {
    const { onReset } = this.props;
    onReset();
    this.props.form.resetFields();
  };

  render() {

    const { getFieldDecorator } = this.props.form;

    const { name = [], gid = [] } = this.props.record;
    const groupList = JSON.parse(sessionStorage.getItem('groupList'));
    const results = groupList.map(group => <Option key={group.id}>{group.groupName}</Option>);

    return (
      <div>
        <Form layout="inline"
          // className="ant-advanced-search-form"
              onSubmit={this.handleSearch}
        >
          <FormItem label={'姓名'}>
            {getFieldDecorator('name',{
              initialValue: name,
            })(
              <Input placeholder="输入姓名搜索" />
            )}
          </FormItem>
          <FormItem label="组">
            {getFieldDecorator('gid', {
              initialValue: gid,
            })(

              <Select style={{margin: '0 0 0 0', padding: '4px 11px', width: '250px', height: '32px', 'fontSize': '14px', 'lineHeight': '1.5',}}
                      placeholder="选择组"
                      onChange={this.handleSelectChange}>
                {results}
              </Select>
            )}
          </FormItem>
          <div style={{ textAlign: 'right', float: 'right' }}>
            <Button type="primary" htmlType="submit">搜索</Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
              重置
            </Button>
          </div>
        </Form>
      </div>
    )
  }
}
const Search = Form.create()(Search02);

class User extends React.Component {

  render() {

    const { userList, name, gid, onEdit, onAdd, onDelete, onSearch, onReset} = this.props;
    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
      },
      {
        title: '姓名',
        dataIndex: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
      },
      {
        title: '操作',
        key: 'operation',
        render: (text, record) => (
          <span>
          <UserModify record={record} onOk={ (values) => {
              onEdit(values);
            }
          }>
            <a>更新</a><br/>
          </UserModify>

          <Popconfirm
            title="确定删除吗?"
            onConfirm={ () => { onDelete(record.id); }}
          >
            <a href="">删除</a>
          </Popconfirm>
        </span>
        ),
      },
    ];

    return (
      <div>
        <UserModelCreate onOk={(values) => { onAdd(values);} }>
          <Button type='primary'>新建</Button>
        </UserModelCreate>
        <Search record={ { name: name, gid: gid }} onSearch={ (values) => { onSearch(values); } } onReset={() => onReset()} >

        </Search>

        <Table columns={columns} dataSource={userList} rowKey="id"
               pagination={{ pageSize: 5 } }
        />
      </div>
    );
  }

};

export default Form.create()(User);
